<route>
{
  "meta":{
    "title":"API配置",
    "showMenu":true,
    "serialNum": 40,
    "localism": "sys.API_configuration"
  }
}
</route>

<template>
  <div>
    <el-row v-if="VUE_APP_USER !== 'APP'" :gutter="12">
      <el-col class="mt10">
        <el-button type="primary" @click="handleCreate">{{$t('sys.new')}}</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="appId" label="AppId"/>
      <el-table-column prop="secretKey" label="AppSecret"/>
      <el-table-column prop="thirdAppName" :label="$t('sys.apply_name')"/>

      <el-table-column prop="actions" :label="$t('sys.operation')">
        <template slot-scope="scope">
          <template>
            <span v-if="VUE_APP_USER !== 'APP'" class="table-actionItem"><el-button type="text" @click="handleEdit(scope.row)">{{$t('sys.edit')}}</el-button></span>
            <span class="table-actionItem"><el-button type="text" @click="copy(scope.row)">{{$t('sys.copy')}}</el-button></span>
            <span v-if="VUE_APP_USER !== 'APP'" class="table-actionItem">
              <el-popconfirm
                :title="$t('sys.confirm_to_delete_API')"
                placement="top"
                @confirm="handleDelete(scope.row)"
              >
                <el-button class="link-danger" type="text" slot="reference">{{$t('sys.delete')}}</el-button>
              </el-popconfirm>
            </span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>

    <ApiForm ref="ApiForm" @ok="loadData(pageData.pageNo)"/>

  </div>
</template>

<script>
import ApiForm from './__components__/ApiForm'
import { getApiauthconfigPageList,deleteApiauthconfig } from '@/apis/paas/HmApiAuthConfigController.js'

export default {
  name: 'ApiSetting',
  components: { ApiForm },
  data () {
    return {
      VUE_APP_USER: process.env.VUE_APP_USER,
      loading: false,
      queryData: { },
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      tableData: [],
      total: 0
    }
  },

  created () {
    this.loadData()
  },

  methods: {
    loadData (pageNo = this.pageData.pageNo) {
      this.loading = true
      getApiauthconfigPageList({
        ...this.queryData,
        ...this.pageData,
        pageNo
      }).then(res => {
        if (res.data.length === 0 && pageNo > 1) {
          this.loadData(pageNo - 1)
          return
        }
        this.tableData = res.data
        this.total = res.totalCount
        this.pageData = {
          pageSize: res.pageSize,
          pageNo: res.pageNo
        }
      }).finally(() => {
        this.loading = false
      })
    },

    handleCreate () {
      this.$refs.ApiForm.addForm()
    },

    handleEdit (record) {
      this.$refs.ApiForm.editForm({
        ...record
      })
    },

    handleDelete (record) {
      deleteApiauthconfig([record.id]).then(res => {
        this.loadData()
        this.$message.success(this.$t('sys.operation_success'))
      })
    },
    copy(info) {
      const text = `AppId: ${info.appId}，AppSecret: ${info.secretKey}`
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', text);
      input.select(); // 选中文本
      document.execCommand('copy');
      document.body.removeChild(input);
      this.$message.success(this.$t('sys.copy_success'));
    }
  }
}
</script>

<style lang="scss" scoped></style>
